<template>
    <div>
        <Title :title="title"></Title>
        <div ref="right2" style="height: 250px; margin-top: 15px;"></div>
    </div>
</template>
<script>
// 引入条形图构造函数
import { Bar } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment'; 
import { mapState } from 'vuex'; 
// import Title from './Title.vue';

export default {
    data() {
        return {
            title: '实时颗粒物曲线', 
            params: { 
                page: 1,
                pageSize: 100
            },
            // 存放TSP数据
            tspData: [],
            bar: null
        }
    },
    computed: {
        ...mapState(['ed'])
    },
    watch: {
        // 监听ed变化：设备切换时重新请求数据并更新图表
        ed: {
            handler(n, o) {
                this.params.engineer_id = n.engineer_id;
                this.params.device_id = n.device_id;
                this.getTspData();
                if (this.bar) {
                    this.bar.changeData(this.tspData);
                }
            },
            deep: true
        }
    },
    methods: {
        // 封装加载条形图的函数 适配TSP数据
        loadBar() {
            // 创建条形图实例
            this.bar = new Bar(this.$refs.right2, {
                data: this.tspData, 
                xField: 'tsp', 
                yField: 'insert_time', 
                seriesField: 'insert_time', 
                color: ['#69b1ff', '#36cfc9', '#9777ff', '#ffc850', '#722ed1'], 
                label: {
                    visible: true,
                    style: {
                        fill: 'white',
                        fontSize: 12
                    }
                },
                legend: {
                    position: 'top-left',
                    itemName: {
                        style: {
                            fill: "white",
                            fontSize: 12
                        }
                    }
                },
                tooltip: {
                    showMarkers: true,
                    domStyles: {
                        "g2-tooltip": {
                            background: '#147',
                            color: "white",
                            fontSize: 15
                        }
                    },
                    // 自定义tooltip内容：明确显示时间和TSP数值
                    formatter: (datum) => {
                        return {
                            name: '时间',
                            value: datum.insert_time,
                            extra: [{
                                name: '颗粒物(*TSP)',
                                value: `${datum.tsp} μg/m³` 
                            }]
                        };
                    }
                },
                xAxis: {
                    label: {
                        style: {
                            fill: "white",
                            fontSize: 12
                        }
                    },
                    title: {
                        text: '颗粒物(TSP)μg/m³', 
                        style: {
                            fill: "white"
                        }
                    }
                },
                yAxis: {
                    label: {
                        style: {
                            fill: "white",
                            fontSize: 12
                        }
                    }
                },
                animation: {
                    appear: {
                        animation: 'wave-in',
                        duration: 3000,
                    },
                }
            });
            // 渲染条形图
            this.bar.render();
        },
        // 封装获取TSP数据的方法
        async getTspData() {
            let res = await get('/dashboard/pageQueryTodayData', this.params);
            console.log(res, "获取TSP数据响应");
            let tsp = [];
            // 数据处理
            res.data.list.forEach((item, index, arr) => {
                if (index === 0) {
                    arr[0].tsp = 30; 
                }
                // 时间格式化：转为"HH:mm"格式
                item.insert_time = moment(item.insert_time).format("HH:mm");
                // 数据抽样：每隔10条取一条
                if (index % 10 === 0) {
                    tsp.push(arr[index]);
                }
            });
            // 赋值处理后的TSP数据
            this.tspData = tsp;
        }
    },
    // 生命周期 先获取数据再渲染图表
    async mounted() {
        await this.getTspData();
        this.loadBar();
    }
}
</script>
<style lang="less" scoped></style>
